<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>amCharts Data Loader Example</title>
    <script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
    <script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
    <script src="http://www.amcharts.com/lib/3/amstock.js" type="text/javascript"></script>
    <script src="../dataloader.min.js" type="text/javascript"></script>
    <style>
    body, html {
      font-family: Verdana;
      font-size: 12px;
      background: #000;
    }
    #chartdiv {
      width: 100%;
      height: 500px;
      position: relative;
    }
    #chartdiv .amChartsPeriodSelector {
      padding-left: 35px;
    }
    .amChartsButtonSelected {
      font-weight: bold;
    }
    .amChartsButton {
      color: #fff;
      background: transparent;
      opacity: 0.7;
      border: 1px solid rgba(255,255,2555,.3);
      -moz-border-radius: 5px;
      border-radius: 5px;
      margin: 1px;
      outline: none;
      box-sizing: border-box;
    }
    .amChartsInputField {
      color: #000;
    } 
    </style>
    <script type="text/javascript">
    var chart = AmCharts.makeChart("chartdiv", {
      "type": "stock",
      "pathToImages": "../../../images/",
      "color": "#fff",
      "dataSets": [{
      "title": "MSFT",
        "fieldMappings": [{
          "fromField": "Open",
          "toField": "open"
        }, {
          "fromField": "High",
          "toField": "high"
        }, {
          "fromField": "Low",
          "toField": "low"
        }, {
          "fromField": "Close",
          "toField": "close"
        }, {
          "fromField": "Volume",
          "toField": "volume"
        }],
        "compared": false,
        "categoryField": "Date",

        /**
         * data loader for data set data
         */
        "dataLoader": {
          "url": "data/MSFT.csv",
          "format": "csv",
          "showCurtain": true,
          "showErrors": true,
          "async": true,
          "reverse": true,
          "delimiter": ",",
          "useColumnNames": true
       },

       /**
        * data loader for events data
        */
        "eventDataLoader": {
          "url": "data/MSFT_events.csv",
          "format": "csv",
          "showCurtain": true,
          "showErrors": true,
          "async": true,
          "reverse": true,
          "delimiter": ",",
          "useColumnNames": true,
          "postProcess": function ( data ) {
            for ( var x in data ) {
              switch( data[x].Type ) {
                case 'A':
                  var color = "#85CDE6";
                  break;
                default:
                  var color = "#cccccc";
                  break;
              }
              data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
              data[x] = {
                type: "pin",
                graph: "g1",
                backgroundColor: color,
                date: data[x].Date,
                text: data[x].Type,
                description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
              };
            }
            return data;
          }
       }

      }, {
      "title": "TXN",
        "fieldMappings": [{
          "fromField": "Open",
          "toField": "open"
        }, {
          "fromField": "High",
          "toField": "high"
        }, {
          "fromField": "Low",
          "toField": "low"
        }, {
          "fromField": "Close",
          "toField": "close"
        }, {
          "fromField": "Volume",
          "toField": "volume"
        }],
        "compared": true,
        "categoryField": "Date",
        "dataLoader": {
          "url": "data/TXN.csv",
          "format": "csv",
          "showCurtain": true,
          "showErrors": true,
          "async": true,
          "reverse": true,
          "delimiter": ",",
          "useColumnNames": true
       }
      }],
      "dataDateFormat": "YYYY-MM-DD",

      "panels": [{
          "title": "Value",
          "percentHeight": 70,

          "stockGraphs": [{
            "type": "candlestick",
            "id": "g1",
            "openField": "open",
            "closeField": "close",
            "highField": "high",
            "lowField": "low",
            "valueField": "close",
            "lineColor": "#fff",
            "fillColors": "#fff",
            "negativeLineColor": "#db4c3c",
            "negativeFillColors": "#db4c3c",
            "fillAlphas": 1,
            "comparedGraphLineThickness": 2,
            "columnWidth": 0.7,
            "useDataSetColors": false,
            "comparable": true,
            "compareField": "close",
            "showBalloon": false,
            "proCandlesticks": true
          }],

          "stockLegend": {
            "valueTextRegular": undefined,
            "periodValueTextComparing": "[[percents.value.close]]%"
          }

        },

        {
          "title": "Volume",
          "percentHeight": 30,
          "marginTop": 1,
          "columnWidth": 0.6,
          "showCategoryAxis": false,

          "stockGraphs": [{
            "valueField": "volume",
            "openField": "open",
            "type": "column",
            "showBalloon": false,
            "fillAlphas": 1,
            "lineColor": "#fff",
            "fillColors": "#fff",
            "negativeLineColor": "#db4c3c",
            "negativeFillColors": "#db4c3c",
            "useDataSetColors": false
          }],

          "stockLegend": {
            "markerType": "none",
            "markerSize": 0,
            "labelText": "",
            "periodValueTextRegular": "[[value.close]]"
          },

          "valueAxes": [{
            "usePrefixes": true
          }]
        }
      ],

      panelsSettings: {
        color: "#fff",
        plotAreaFillColors: "#333",
        plotAreaFillAlphas: 1,
        marginLeft: 60,
        marginTop: 5,
        marginBottom: 5
      },

      chartScrollbarSettings: {
        graph: "g1",
        graphType: "line",
        usePeriod: "WW",
        backgroundColor: "#333",
        graphFillColor: "#666",
        graphFillAlpha: 0.5,
        gridColor: "#555",
        gridAlpha: 1,
        selectedBackgroundColor: "#444",
        selectedGraphFillAlpha: 1
      },

      categoryAxesSettings: {
        equalSpacing: true,
        gridColor: "#555",
        gridAlpha: 1
      },

      valueAxesSettings: {
        gridColor: "#555",
        gridAlpha: 1,
        inside: false,
        showLastLabel: true
      },

      chartCursorSettings: {
        pan: true,
        valueLineEnabled: true,
        valueLineBalloonEnabled: true
      },

      legendSettings: {
        color: "#fff"
      },

      stockEventsSettings: {
        showAt: "high",
        type: "pin"
      },

      balloon: {
        textAlign: "left",
        offsetY: 10
      },

      periodSelector: {
        position: "bottom",
        periods: [{
          period: "DD",
          count: 10,
          label: "10D"
        }, {
          period: "MM",
          count: 1,
          label: "1M"
        }, {
          period: "MM",
          count: 6,
          label: "6M"
        }, {
          period: "YYYY",
          count: 1,
          label: "1Y"
        }, {
          period: "YYYY",
          count: 2,
          selected: true,
          label: "2Y"
        }, {
          period: "YTD",
          label: "YTD"
        }, {
          period: "MAX",
          label: "MAX"
        }]
      }
    });
    </script>
  </head>

  <body>
    <div id="chartdiv"></div>
  </body>

</html>